<template>
    <div class="box">
        <el-form>
            <select-each :pre="''" :tableProps="tableProps" :condition.sync="condition.children"></select-each>
        </el-form>
    </div>
</template>

<script>
import SelectEach from './selectEach.vue'
export default {
    name: "selectForm",
    props: {
        condition: {
            type: Object,
            default: () => {
                return {
                    children: [
                        {
                            key: '',
                            con: '',
                            val: '',
                            linkChar: '',
                            type: 'normal'//||brackets
                        }
                    ],
                    linkChar: '',
                    type: 'brackets'//||brackets
                }
            }
        },
        tableProps: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {

        }
    },
    components: {
        SelectEach
    }
}
</script>

<style lang="scss" scoped>
.box::v-deep {
    .el-form-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;

        label {
            // width: 5%;
            // max-width: 15%;
            font-size: 12px;
            box-sizing: border-box;
            padding-right: 10px !important;
            white-space: nowrap !important;
            // border: 1px solid #ddd;
        }

        .el-form-item__content {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            width: 95% !important;
            border: 2px solid #93a5cf;
            border-left: 4px solid #97ABFF;
            margin: 0 !important;
            padding-left: 10px;
            border-radius: 5px;

            .left {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                width: 80%;

                .el-input {
                    width: 25% !important;
                }

                .el-select {
                    width: 25% !important;
                    margin: 0 5px;

                    .el-input {
                        width: 100% !important;

                        input {
                            text-align: center;
                        }
                    }
                }
            }

            .right {
                width: 20%;
                // text-align: right;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
                align-items: center;
                padding: 0 10px;

                .el-select {
                    width: 70% !important;
                    margin: 0 5px;

                    .el-input {
                        width: 100% !important;

                        input {
                            text-align: center;
                        }
                    }
                }
            }

        }

        .el-button {
            padding: 0 !important;
            margin-left: 5px;
            font-size: 14px;
            padding: 0.55% !important;
            // background-color: #b1b1b1;
            background-color: transparent;

            span {
                // color: #fff;
                color: #666;
            }

            &:hover {
                background-color: #4c7cce;

                span {
                    color: #fff;
                }
            }
        }

        .blue {
            color: #409EFF;
        }

        .red {
            color: red;
            // background-color: #fff;
            background-color: transparent;
        }
    }
}
</style>